/**
 * 半小时热门列表界面
 * Created by 10691 on 17/5/5.
 */
import React, {Component} from "react";
import {ListView, StyleSheet, TouchableHighlight, View} from "react-native";
import {PullList} from "react-native-pull";

import CommunalHotCellItem from "../communals/HotCellListItem.js";
import HttpUtils from "../http/HttpUtils.js";
import CommunalDetail from "../communals/GoodsDetails.js";
import {renderHeader, screenWidth} from "../communals/MyExports.js";

export default class HalfHourHot extends Component {

    constructor() {
        super();
        this.state = {
            dataSource: new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}),
        };

        // 绑定操作
        this.renderRow = this.renderRow.bind(this)
    }

    componentDidMount() {
        this.loadData();
    }

    /**
     * 网络请求加载数据
     */
    loadData(resolve) {
        HttpUtils.get('http://guangdiu.com/api/gethots.php')
            .then((responseData) => {
                this.setState({
                    dataSource: this.state.dataSource.cloneWithRows(responseData.data)
                });
                if (resolve !== undefined) {
                    setTimeout(() => {
                        resolve(); // 关闭下拉动画
                    }, 1000);
                }
            }).catch((error) => {
            console.log(error)
        })
    }


    render() {
        return (
            <View style={HalfHourHotStyles.containerStyle}>
                <PullList
                    removeClippedSubviews={false}
                    onPullRelease={(resolve) => this.loadData(resolve)}
                    dataSource={this.state.dataSource}
                    renderHeader={() => renderHeader()}
                    renderRow={this.renderRow}
                    style={HalfHourHotStyles.listView}/>
            </View>
        );
    }

    /**
     * 渲染ListView每一行的数据
     */
    renderRow(rowData) {
        return (
            <TouchableHighlight
                underlayColor={'#13fff0'}
                onPress={() => {
                    this.props.navigation.navigate('CommunalDetail', {ID: rowData.id});
                }}>
                <View>
                    <CommunalHotCellItem
                        image={rowData.image}
                        title={rowData.title}/>
                </View>
            </TouchableHighlight>
        )
    }
}

const HalfHourHotStyles = StyleSheet.create({
    containerStyle: {
        flex: 1,
        alignItems: 'center',
    },

    listViewStyle: {
        width: screenWidth,
    },
});

